<template>
  <div class="stagesStyle">
    <div class="stages" v-for="item in testArray" :key="item.id">
      <div class="stagsImg" @click="clickImg(item.testData)">
        <img :src=targetUrl(item.img) alt="">
      </div>

      <div class="stagesRight">
        <div class="stagesRight_title">{{ item.name }}</div>
        <div class="stagesRight_num" @click="clickNum">{{ item.num }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useMainStore } from "../../../../store/index"
const store = useMainStore()

function targetUrl(name) {
  return new URL(`../../../../assets/lingshui/${name}.svg`, import.meta.url).href
}

const testArray = [
  {
    id: 0,
    img: 'u138',
    name: '立项阶段',
    num: '433',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.39185888457718, 28.353721277203988] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.56538356894123, 27.875093656449806] },
      }
    ]
  },
  {
    id: 1,
    img: 'u143',
    name: '预拨阶段',
    num: '632',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.3263, 28.569896] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.179113, 28.291863] },
      }
    ]
  },
  {
    id: 2,
    img: 'u148',
    name: '验收阶段',
    num: '643',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.54888, 27.990817] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.319392, 27.753973] },
      }
    ]
  },
  {
    id: 3,
    img: 'u152',
    name: '结算阶段',
    num: '522',
    testData: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [119.527496, 27.987822] },
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [120.148814, 28.446336] },
      }
    ]
  },
]

const clickNum = () => {
  store.showModel = true
}

const clickImg =(itemData)=>{
  store.showPonit = true
  store.testArray = itemData
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.stagesStyle {
  width: 375px;
  height: 100%;
  // border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .stages {
    width: 176px;
    height: 140px;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .stagsImg {
    // border: 1px solid red;

      width: 59px;
      height: 59px;
      border-radius: 50%;
      background-image: url("../../../../assets/lingshui/u137.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .stagesRight {
      width: 90px;
      height: 75px;

      // border: 1px solid red;
      .stagesRight_title {
        color: #FFFFFF;
        font-size: 16px;
      }

      .stagesRight_num {
        color: #44EFFF;
        font-weight: 700;
        font-size: 36px;
        cursor: pointer;
      }
    }
  }
}
</style>